<template>
    <div class="add">
        <van-nav-bar
        title="分享菜谱"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <van-steps :active="active">
            <van-step>标题</van-step>
            <van-step>上传封面</van-step>
            <van-step>食材</van-step>
            <van-step>步骤</van-step>
            <van-step>简述</van-step>
            <van-step>类别</van-step>
        </van-steps>
        <!-- 标题 -->
        <van-cell-group v-show="active==0">
            <van-field v-model="title" label="标题" placeholder="请输入菜谱标题..." />
        </van-cell-group>
        <!-- 封面 -->
        <van-cell-group class="uploader" v-show="active==1">
            请上传封面图：<van-uploader preview-size="120px" multiple :max-count="1" v-model="fileList[0]" :after-read="afterRead" />
        </van-cell-group>
        <!-- 食材 -->
        <van-cell-group class="input " v-show="active==2" >
            <div v-for="(p,i) of food" :key="i">
                <input type="text" v-model="foodname[i]" placeholder="食材名.."> 
                <input type="text" v-model="much[i]" placeholder="用量..">
            </div>
                <van-icon class="plus" name="plus" size="40" @click="addlist1" />
        </van-cell-group>
        <!-- 步骤 -->
        <van-cell-group class="input " v-show="active==3" >
            <div class="content" v-for="(p,i) of n" :key="i">
                <textarea name="" id="" cols="20" v-model="text[i+1]" rows="10" :placeholder="`步骤${i+1}+图片:`">
                </textarea>
                <van-uploader preview-size="120px" v-model="fileList[i+1]" :after-read="afterRead" multiple :max-count="1"/>
            </div>
                <van-icon class="plus" name="plus" size="40" @click="addlist2" />
        </van-cell-group>

        <!-- 简述 -->
        <van-cell-group v-show="active==4">
            <van-field v-model="describe" label="上传简述" placeholder="请输入菜谱简述..." />
        </van-cell-group>
        <!-- 分类 -->
        <van-cell-group v-show="active==5">
            <van-dropdown-menu>
                <van-dropdown-item v-model="foodclass" :options="option" />
            </van-dropdown-menu>
        </van-cell-group>

        <!-- 按钮 -->
        <van-button  v-show="active!=5" @click="next(1)" class="btn_pre" round type="info" block>下一步</van-button>
        <van-button v-show="active!=0" @click="next(-1)" class="btn_next" round type="info" block>上一步</van-button>
        <van-button  v-show="active==5" class="btn_pre" @click="upload" round type="info" block>提交</van-button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      title:'',
      describe:'',
      food:1,
      ingredient:'',
      foodname:[],
      much:[],
      text:[],
      n:1,
      fileList:[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],
      picname:[],
      foodclass:1,
      option:[{ text: '蔬菜', value: 1 },
                { text: '荤菜', value: 2 },
                { text: '主食', value: 3 },
                { text: '海鲜', value: 4 },
                { text: '养生', value: 5 },
                { text: '烘焙', value: 6 },],
       
    };
  },
   methods: {
    afterRead(file) {
        // let fd = new FormData();
        // fd.append("uploadFile",file.file);//单个文件
        // this.axios.post("http://localhost:3000/upload",fd).then(res=>{
        //     console.log(res.data.name);
        //     this.picname[this.picname.length] = res.data.name;
        // });
        // console.log(file.file);  
        // console.log(this.fileList[0][0].file);
    },
    next(n){
        if(n>0){
            this.isnext = true;
        }
        let i = this.active + n;
        let str = '';
        if(i>=0&&i<=5){
            this.active=i;
            for(var j=0;j<this.foodname.length;j++){
                str = str + ',' + this.foodname[j]+','+this.much[j];
            }
            this.ingredient = str;
        }
        console.log(this.active);
    },
        addlist1(){
            if(this.food<this.fileList.length){
                this.food++
            }else{
                console.log("超出范围");
            }
        },
    addlist2(){
        if(this.n<this.fileList.length){
            this.n++
        }else{
            console.log("超出范围");
        }
        // this.ingredient=this.ingredient+','+this.food+','+this.much;
    },
    onClickLeft(){
        this.$router.push("/")
    },
    upload(){
        for(var k=0; k<this.n+1; k++ ){
            let fd = new FormData();
            fd.append("uploadFile",this.fileList[k][0].file);//单个文件
            this.axios.post("http://localhost:3000/upload",fd).then(res=>{
                console.log(res.data.name);
                this.picname[this.picname.length] = res.data.name;
            });
            console.log(this.picname);
        }
        setTimeout(()=>{
            let content = '';
             for(var j=1;j<this.text.length;j++){
                // content = `${content},{img:\"${this.picname[j]}\",text:\"${this.text[j]}\"}`;
                content = `${content},{img:\'${this.picname[j]}\',text:\'${this.text[j]}\'}`;
            }
        let book = {
            uid:7, 
            title:this.title,
            pic:this.picname[0],
            describe:this.describe,
            ingredient:this.ingredient.slice(1),
            content:`[${content.slice(1)}]`,
            cid:this.foodclass,
            rate:'[{rate:2.5,uname:"dingding"}]',
            create_time:new Date().getTime()
        }
        console.log(book);
        this.axios.post('/cookBook/update',
            `uid=${book.uid}&title=${book.title}
            &pic=${book.pic}
            &describe=${book.describe}
            &ingredient=${book.ingredient}
            &content=${book.content}
            &cid=${book.cid}
            &rate=${book.rate}
            &create_time=${book.create_time}
            `)
        .then(res=>{
            console.log(res);
        })
        },2000)
        this.$router.push('/cookHome');
    }
  },
  components:{
  }
};
</script>
<style>
.add{
    height: 100%;
}
.add .btn_pre{
    float: left;
    width: 40%;
    margin-left: 58%;
    position: absolute;
    bottom: 20px;
    background-color: #ff3333;
    background-color: #ff3333;
}
.add .btn_next{
    float: left;
    width: 40%;
    margin-left: 2%;
    position: absolute;
    bottom: 20px;
    background-color: #ff3333;
} 
.add .uploader{
    padding-left:50px;
}
.add .content{
    border: 1px #656565 solid;
}
.add .content textarea{
    border: none;
    width: 240px;
    height: 118px;
    overflow:scroll;
}
.add .content .van-uploader{
    position: absolute;
}
.add .input{
    height: 400px;
    overflow: scroll;
}
.add .input input{
    float: left;
    width:45%;
    outline: none;
    margin-bottom:5px;
}
.add .input>div{
    margin-top: 20px;
}
.add .input .plus{
    margin-left: 80%;
}
</style>